<template>
  <div>
    <el-button type="primary" size="mini" @click="addAclDialog = true">添加权限</el-button>
    <el-table
        :data="aclData"
        style="width: 100%; margin: 10px 0px"
        row-key="id"
        :key="key"
        lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
          label="权限名称"
          width="250px">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column
          prop="type"
          label="权限类型"
          width="100"
          :formatter="typeFormat">
      </el-table-column>
      <el-table-column
          label="备注"
          width="220">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.remark }}</p>
            <div slot="reference" class="name-wrapper">
              {{ scope.row.remark && scope.row.remark.substr(0,10) }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          prop="seq"
          label="排序"
          width="100">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="100">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.status === '0' ? 'danger' : 'success'"
              disable-transitions>{{scope.row.status === '0' ? '冻结' : '正常'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
              type="text"
              @click="showEditDialog(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              type="text"
              @click="showAddDialog(scope.row)">添加
          </el-button>
          <el-button
              type="text"
              @click="deleteAclFun(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="权限编辑"
        :visible.sync="aclEditDialog"
        width="40%"
               center
        :before-close="handleClose">
      <el-form :model="aclDetail" :rules="rules" ref="aclDetail" label-width="100px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="aclDetail.name" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" prop="type">
          <el-radio-group v-model="aclDetail.type">
            <el-radio label="0">接口</el-radio>
            <el-radio label="1">按钮</el-radio>
            <el-radio label="2">组件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="url" prop="url" v-if="aclDetail.type==0">
          <el-input v-model="aclDetail.url" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="组件标识" prop="component" v-if="aclDetail.type==2">
          <el-input v-model="aclDetail.component" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="按钮标识" prop="buttonId" v-if="aclDetail.type==1">
          <el-input v-model="aclDetail.buttonId" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="权限状态" prop="status">
          <el-select v-model="aclDetail.status" size="small" style="width: 100px" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="seq">
          <el-input v-model="aclDetail.seq" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="aclDetail.remark" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="aclEditDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="editAclFun('aclDetail')" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加权限"
    :visible.sync="addAclDialog"
    width="40%"
               center
    :before-close="handleClose">
      <el-form :model="addAcl" :rules="rules" ref="AddAcl" label-width="100px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="addAcl.name" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="权限类型">
          <el-radio-group v-model="addAclType">
            <el-radio label="0">接口</el-radio>
            <el-radio label="1">按钮</el-radio>
            <el-radio label="2">组件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="url" prop="url" v-if="addAclType==0">
          <el-input v-model="addAcl.url" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="组件标识" prop="component" v-if="addAclType==2">
          <el-input v-model="addAcl.component" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="按钮标识" prop="buttonId" v-if="addAclType==1">
          <el-input v-model="addAcl.buttonId" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="权限状态" prop="status">
          <el-select v-model="addAcl.status" style="width: 100px" placeholder="请选择" size="small">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="seq">
          <el-input v-model="addAcl.seq" size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="上级">
          <el-input v-model="addAcl.parentName" :disabled=true size="small" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="addAcl.remark" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAclDialog = false;addAcl={}" size="small">取 消</el-button>
        <el-button type="primary" @click="addAclFun('AddAcl')" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import {deleteAcl, freezeAcl, getAclTreeList, saveAcl, updateAcl,deleteOneAcl} from "@/api/acl/acl";
import {regular} from "@/utils/validate";

export default {
  name: "index",
  data() {
    return {
      addAclType:'1',
      addAclDialog:false,
      key:'',
      options: [{
        value: '0',
        label: '冻结'
      }, {
        value: '1',
        label: '正常'
      }],
      addAcl:{},
      aclEditDialog:false,
      buttonDialog:false,
      componentDialog:false,
      aclDetail:{},
      multipleSelection:[],
      aclData: [],
      rules: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        seq: [
          { required: true,message: '请输入数字', trigger: 'blur'}
        ],
        type: [
          {pattern:regular.type,message:regular.typeMsg,trigger: 'blur'},
          {required: true, message: '请输入类型', trigger: 'blur'}
        ],
        status:[
          {pattern:regular.status,message:regular.statusMsg,trigger: 'blur'},
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
        deptId:[
          {required: true, message: '请选择部门', trigger: 'blur'}
        ],
        component:[
          {required: true, message: '请输入组件id', trigger: 'blur'}
        ],
        buttonId:[
          {required: true, message: '请输入按钮id', trigger: 'blur'}
        ],
        url:[
          {required: true, message: '请输入url', trigger: 'blur'}
        ]

      },
      type: [
          {value: '0', label: '接口'},
        {value: '1', label: '按钮'},
        {value: '2', label: '组件'}
      ],
    }
  },
  created() {
    this.getAclListFun('0');
  },
  methods: {
    showAddDialog(row){
      this.addAcl.parentName = row.name;
      this.addAcl.parentId = row.id;
      this.addAclDialog = true;
    },
    addAclFun(formName){
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return
        }
        this.addAcl.type = this.addAclType;
        if (!this.addAcl.parentId){
          this.addAcl.parentId = '0';
        }
        saveAcl(this.addAcl).then(res =>{
          this.addAclDialog = false;
          this.addAcl = {};
          this.getAclListFun('0');
        })
      });
    },
    getAclListFun(parentId) {
      getAclTreeList(parentId).then(res => {
        this.aclData = res.data
        this.key = Symbol(new Date().toString());// 强制刷新list
      })
    },
    editAclFun(formName){
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return
        }
        updateAcl(this.aclDetail).then(res =>{
          this.aclEditDialog = false;
          this.aclDetail = {};
        })
        this.getAclListFun('0');
      });
    },
    patchFreeze(){
      let ids = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id);
      }
      freezeAcl({'ids':ids},'0').then(res =>{
        this.getAclListFun('0')
        this.getAclListFun('0')
      })
    },
    patchDelete(){
      let ids = []
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id);
      }
      deleteAcl({'ids':ids}).then(res =>{
        this.getAclListFun('0');
      })
    },
    deleteAclFun(row){
      deleteOneAcl(row.id).then(res =>{
        this.getAclListFun('0');
      })
    },
    load(tree, treeNode, resolve) {
      getAclTreeList(tree.id).then(res =>{
        resolve(res.data)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    stateFormat(row) {
      if (row.status == '0') {
        return '冻结'
      } else  {
        return '正常'
      }
    },
    typeFormat(row) {
      if (row.type == '0') {
        return '接口'
      } else if(row.type == '1') {
        return '按钮'
      }else {
        return '组件'
      }
    },
    showEditDialog(index,row){
      // this.aclDetail = {...row};
      this.aclDetail = row;
      this.aclEditDialog = true;
    },
    open(message) {
      this.$message({
        showClose: true,
        message: message,
        type: 'success'
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.addAcl={};
            done();
          })
          .catch(_ => {
          });
    },
  },

}
</script>

<style scoped>

</style>
